<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Instruments management</title>
	</head>
	<body>
		<div dojoType="dijit.layout.ContentPane" id="instrumentsManagement" >
			<form>
				<fieldset>
					<legend>
						Filter instruments:
					</legend>
					<table width="100%">
						<tr>
							<td>
								<label>
									Instrument type:
								</label>
								<input dojoType="dijit.form.TextBox" id="instrumentTypeFilter" onKeyUp="filterInstrumentsGrid( this)"/>
							</td>
							<td>
								<label>
									Instrument description:
								</label>
								<input dojoType="dijit.form.TextBox" id="instrumentDescriptionFilter" onKeyUp="filterInstrumentsGrid( this)"/>
							</td>
							<td>
								<button dojoType="dijit.form.Button" onClick="resetUserGridFilter( )">Reset filter</button>
							</td>
							<td>
								<button dojoType="dijit.form.Button">
									Extended search
									<script event="onClick" args="event" type="dojo/method">
										var searchDialog = new dijit.Dialog( {
											id		: "instrumentSearch",
											title	: "Extended Instruments Search",
											href	: "/FinalProject/templates/instruments/instrumentSearch.jsp"
										});
										searchDialog.show( );
									</script>
								</button>
							</td>
						</tr>
					</table>
				</fieldset>
			</form>
		</div>
		<div dojoType="dijit.layout.ContentPane" id="instrumentControls">
			<form>
				<table>
					<tr>
						<td>
							<button dojoType="dijit.form.Button" id="addInstrumentBtn">Add instrument
								<script type="dojo/method" event="onClick" args="event">
									var newInstDialog = new dijit.Dialog( {
										id		: "instrumentDialog",
										title	: "Insert New Instrument",
										href	: "/FinalProject/templates/instruments/instrumentDialog.jsp",
										onCancel: function( ) {
											this.destroyRecursive() ;
										}
									});
									newInstDialog.onLoad = function( ) {
										dojo.byId( "instrumentOp").value="instrument_insert";
									};
			            			newInstDialog.show( );
								</script>
							</button>
						</td>
						<td>
							<button dojoType="dijit.form.Button" id="updInstrumentBtn">
								Update instrument
								<script type="dojo/method" event="onClick" args="event">
									if ( dijit.byId( "instrumentsGrid").selection.getSelected( ).length == 0) {
										dijit.byId( "toaster").setContent( "You should select instrument to update first", "fatal");
										dijit.byId( "toaster").show( );
										return;
									}

									var updInstDialog = new dijit.Dialog( {
										id 		: "instrumentDialog",
										title	: "Update Instrument",
										href	: "/FinalProject/templates/instruments/instrumentDialog.jsp",
										onCancel: function( ) {
											this.destroyRecursive() ;
										}
									});
									updInstDialog.onLoad = function( ) {
										dojo.byId( "instrumentOp").value="instrument_update";
										this.setValues( dijit.byId( "instrumentsGrid").selection.getSelected( )[0]);
										if ( dijit.byId( "projectOrdersGrid")) {
											dijit.byId( "projectOrdersGrid").store.close( );
											dijit.byId( "projectOrdersGrid").store.fetch( );
										}
										if ( dijit.byId( "instrumentOrdersGrid")) {
											dijit.byId( "instrumentOrdersGrid").store.close( );
											dijit.byId( "instrumentOrdersGrid").store.fetch( );
										}
										if ( dijit.byId( "userOrdersGrid")) {
											dijit.byId( "userOrdersGrid").store.close( );
											dijit.byId( "userOrdersGrid").store.fetch( );
										}
									};
									updInstDialog.show( );
								</script>
							</button>
						</td>
						<td>
							<button dojoType="dijit.form.Button" id="delInstrumentBtn">
								Delete instrument
								<script event="onClick" args="event" type="dojo/method">
								if ( dijit.byId( "instrumentsGrid").selection.getSelected( ).length == 0) {
									dijit.byId( "toaster").setContent( "You should select instrument to update first", "fatal");
									dijit.byId( "toaster").show( );
									return;
								}
									dojo.xhrPost( {
										url 		: "/FinalProject/app/instrumentManagement",
										content		: { instrumentOp : "instrument_delete", id : dijit.byId( "instrumentsGrid").selection.getSelected()[0].id[0]},
										load		: function( data, ioArgs) {
											if ( data == "ERROR") {
												dijit.byId( "toaster").setContent( "Error while deleting instrument. Operation aborted.", "fatal");
												dijit.byId( "toaster").show( );
												return;
											}
											dijit.byId( "instrumentsGrid").removeSelectedRows( );
											dijit.byId( "toaster").setContent( "Instrument has been sucessefully deleted.", "fatal");
											dijit.byId( "toaster").show( );
										},
										error 		: function( data) {
											dijit.byId( "toaster").setContent( "Backend error while deleting instrument. Operation aborted.", "fatal");
											dijit.byId( "toaster").show( );
											return;
										} 
									});
								</script>
							</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="gridContainer" style="width:100%;height:300px">
			<h2>
				Instruments list:
			</h2>
			<div id="instrumentsGrid" style="width:100%;height:250px">
			</div>
		</div>
		<div dojoType="dijit.layout.ContentPane" id="instOrdersList" href="/FinalProject/templates/orders/instOrders.jsp">
		</div>
	</body>
	<script type="text/javascript">
		dojo.addOnLoad( function( ) {
			var instrumentsStore = new dojo.data.ItemFileWriteStore( { url : "/FinalProject/app/instrumentManagement?instrumentOp=instrument_list_all", clearOnClose: true, jsId:"instrumentsStore"});
			var grid = new dojox.grid.DataGrid({
                query: { type: '*' },
                store: instrumentsStore,
                structure: Layouts.instrumentLayout
             }, 'instrumentsGrid');
			grid.onRowDblClick = function( event) {
				var updInstDialog = new dijit.Dialog( {
					id 		: "instrumentDialog",
					title	: "Update Instrument",
					href	: "/FinalProject/templates/instruments/instrumentDialog.jsp"
				});
				updInstDialog.onLoad = function( ) {
					dojo.byId( "instrumentOp").value="instrument_update";
					this.setValues( dijit.byId( "instrumentsGrid").selection.getSelected( )[0]);
				};
				updInstDialog.show( );
            };
            grid.startup( );
            instrumentsGridState.currentGrid = grid;
		});

		function filterInstrumentsGrid( control) {
			var gridId 		= instrumentsGridState.currentGrid.id;
			var gridQuery = instrumentsGridState.filterQueryMap[gridId];
			var result = {
				instrumentTypeFilter 	: function( ) {
					gridQuery.type = control.attr( "value") + "*";
				},
				instrumentDescriptionFilter : function( ) {
					gridQuery.description = control.attr( "value") + "*";
				}
			}[control.id];
			if ( result) {
				result( );
			}
			instrumentsGridState.currentGrid.setQuery( gridQuery);
		} 

		function resetUserGridFilter( ) {
			var gridId 		= instrumentsGridState.currentGrid.id;
			instrumentsGridState.filterQueryMap[gridId] = { type : "*"};
			instrumentsGridState.currentGrid.setQuery( { type : "*"});
			dijit.byId( "instrumentTypeFilter").attr( "value", "");
			dijit.byId( "instrumentDescriptionFilter").attr( "value", "");
		}
	
	</script>
	
</html>